<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>
                <!--① click事件直接使用JavaScript语句-->
                <button v-on:click="count += 1">Add 1</button>
                <span>count: {{count}}</span>
            </p>
            <p>
                <!--② click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
                <!--简写语法-->
                <button @click="greet">Greet</button>
            </p>
            <p>
                <!--③ click事件使用内联语句调用方法-->
                <button v-on:click="say('Hi')">Hi</button>
				<button onclick="test('Hi')">Hi</button>
				<button onClick="test('Hi')">Hi</button>
            </p>
        </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
		function test(msg){
			alert(msg)
		}
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    message: 'Hello, Vue.js!'
                }
            },
            //在选项对象的methods属性对象中定义方法
            methods: {
                greet: function() {
                    //方法的this值始终指向组件实例
                    alert(this.message)
                },
                //对象方法的简写语法
                say(msg) {
                    alert(msg)
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>
